import { defineComponent, provide, readonly } from 'vue'
import { useAppConfig } from '../hooks'
import { DESIGNER_LAYOUT_SYMBOL } from '@/core'

export const Layout = defineComponent({
  setup(_, { slots }) {
    const appConfig = useAppConfig()

    provide(DESIGNER_LAYOUT_SYMBOL, readonly(appConfig))
    return () => (
      <div
        class={[
          `${appConfig.prefixCls}app`,
          `${appConfig.prefixCls}${appConfig.appTheme}`,
        ]}
      >
        {slots.default?.()}
      </div>
    )
  },
})
